<template>
  <div>
    <a-card>
      <CouponModal ref="couponModal" @handleAddCoupons="handleAddCoupons"></CouponModal>
      <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="定制盒子首单奖励" required>
          <a-switch v-model="form.boxAwardOpen" />
        </a-form-model-item>
        <a-form-model-item label="奖励券包">
          <a-button type="primary" @click="openCoupons('boxAward')"><a-icon type="plus" />添加</a-button>
          <!-- <a-select v-model="form.boxAward" mode="multiple" show-search :filter-option="filterOption">
            <a-select-option v-for="(item, index) in coupons" :key="index" :value="item.id">{{ item.name }}</a-select-option>
          </a-select> -->
        </a-form-model-item>
        <div class="coupon-table">
          <CouponTable ref="boxAwardList" @updateCoupons="updateCoupons"></CouponTable>
        </div>
        <a-form-model-item label="首次订阅奖励" required>
          <a-switch v-model="form.ydAwardOpen" />
        </a-form-model-item>
        <a-form-model-item label="奖励券包">
          <a-button type="primary" @click="openCoupons('ydAward')"><a-icon type="plus" />添加</a-button>
          <!-- <a-select v-model="form.ydAward" mode="multiple" show-search :filter-option="filterOption">
            <a-select-option v-for="(item, index) in coupons" :key="index" :value="item.id">{{ item.name }}</a-select-option>
          </a-select> -->
        </a-form-model-item>
        <div class="coupon-table">
          <CouponTable ref="ydAwardList" @updateCoupons="updateCoupons"></CouponTable>
        </div>
        <a-form-model-item label="首次完成订阅计划" required>
          <a-switch v-model="form.subscriptionPlanOpen" />
        </a-form-model-item>
        <a-form-model-item label="奖励券包">
          <a-button type="primary" @click="openCoupons('subscriptionPlanAward')"><a-icon type="plus" />添加</a-button>
          <!-- <a-select v-model="form.subscriptionPlanAward" mode="multiple" show-search :filter-option="filterOption">
            <a-select-option v-for="(item, index) in coupons" :key="index" :value="item.id">{{ item.name }}</a-select-option>
          </a-select> -->
        </a-form-model-item>
        <div class="coupon-table">
          <CouponTable ref="subscriptionPlanAwardList" @updateCoupons="updateCoupons"></CouponTable>
        </div>
        <a-form-model-item label="首次完善风格问卷奖励" required>
          <a-switch v-model="form.questionPageOpen" />
        </a-form-model-item>
        <a-form-model-item label="奖励券包">
          <a-button type="primary" @click="openCoupons('questionPageAward')"><a-icon type="plus" />添加</a-button>
          <!-- <a-select v-model="form.questionPageAward" mode="multiple" show-search :filter-option="filterOption">
            <a-select-option v-for="(item, index) in coupons" :key="index" :value="item.id">{{ item.name }}</a-select-option>
          </a-select> -->
        </a-form-model-item>
        <div class="coupon-table">
          <CouponTable ref="questionPageAwardList" @updateCoupons="updateCoupons"></CouponTable>
        </div>
        <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button type="primary" @click="onSubmit">保存</a-button>
          <a-button style="margin-left: 10px;" @click="resetForm">取消</a-button>
        </a-form-model-item>
      </a-form-model>
    </a-card>
  </div>
</template>
<script>
import { queryUserShareSetting, saveUserShareSetting, couponList } from '@/api/box/setting'
import CouponTable from '@/views/box/components/couponModal/couponTable'
import { CouponModal } from '@/views/box/components'
export default {
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      coupons: [],
      form: {},
      originData: {},
      currentCoupon: '',
      boxAwardList: [],
      ydAwardList: [],
      subscriptionPlanAwardList: [],
      questionPageAwardList: []
    }
  },
  components: {
    CouponTable,
    CouponModal
  },
  mounted() {
    this.initialPage()
  },
  methods: {
    // 下拉框搜索
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    async initialPage() {
      await this.fetchCouponList()
      let arr = await this.fetchData()
      if (arr.length > 0) await this.fetchCurrentCoupons(arr)
    },
    fetchCouponList() {
      let params = {
        page: {
          pageSize: 100,
          pageNo: 1
        },
        requestData: {}
      }
      return couponList(params).then(res => {
        if (res.code == 0) {
          this.coupons = res.data
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    fetchData() {
      return queryUserShareSetting().then(res => {
        if (res.code == 0) {
          let data = res.data
          this.originData = res.data
          this.form = {
            boxAwardOpen: data.boxAwardOpen == 1,
            boxAward: data.boxAward.split(','),
            ydAwardOpen: data.ydAwardOpen == 1,
            ydAward: data.ydAward.split(','),
            subscriptionPlanOpen: data.subscriptionPlanOpen == 1,
            subscriptionPlanAward: data.subscriptionPlanAward.split(','),
            questionPageOpen: data.questionPageOpen == 1,
            questionPageAward: data.questionPageAward.split(',')
          }
          let newArr = [...this.form.boxAward, ...this.form.ydAward, ...this.form.subscriptionPlanAward, ...this.form.questionPageAward]
          return newArr
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    // 回显券
    fetchCurrentCoupons(list) {
      let params = {
        requestData: {
          ruleIds: list
        },
        page: {
          pageNo: 1,
          pageSize: 100
        }
      }
      return couponList(params).then(res => {
        if (res.code == 0) {
          let list = res.data
          if (this.form.boxAward.length > 0) {
            this.boxAwardList = list.filter(e => this.form.boxAward.indexOf(e.id) > -1)
            this.$refs.boxAwardList.setData(this.boxAwardList, 'boxAward')
          }
          if (this.form.ydAward.length > 0) {
            this.ydAwardList = list.filter(e => this.form.ydAward.indexOf(e.id) > -1)
            this.$refs.ydAwardList.setData(this.ydAwardList, 'ydAward')
          }
          if (this.form.subscriptionPlanAward.length > 0) {
            this.subscriptionPlanAwardList = list.filter(e => this.form.subscriptionPlanAward.indexOf(e.id) > -1)
            this.$refs.subscriptionPlanAwardList.setData(this.subscriptionPlanAwardList, 'subscriptionPlanAward')
          }
          if (this.form.questionPageAward.length > 0) {
            this.questionPageAwardList = list.filter(e => this.form.questionPageAward.indexOf(e.id) > -1)
            this.$refs.questionPageAwardList.setData(this.questionPageAwardList, 'questionPageAward')
          }
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    onSubmit() {
      let formValue = {}
      Object.keys(this.form).forEach(i => {
        if (i.includes('Open')) {
          formValue[i] = this.form[i] ? 1 : 0
        } else if (i.includes('Award') && !i.includes('Open')) {
          formValue[i] = this.form[i].length > 0 ? this.form[i].join(',') : ''
        }
      })
      formValue.id = this.originData.id
      let params = {
        requestData: formValue
      }
      saveUserShareSetting(params).then(res => {
        if (res.code == 0) {
          this.$message.success('保存成功！')
          this.originData = formValue
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    resetForm() {
      let data = this.originData
      this.form = {
        boxAwardOpen: data.boxAwardOpen == 1,
        boxAward: data.boxAward.split(','),
        ydAwardOpen: data.ydAwardOpen == 1,
        ydAward: data.ydAward.split(','),
        subscriptionPlanOpen: data.subscriptionPlanOpen == 1,
        subscriptionPlanAward: data.subscriptionPlanAward.split(','),
        questionPageOpen: data.questionPageOpen == 1,
        questionPageAward: data.questionPageAward.split(',')
      }
      let newArr = [...this.form.boxAward, ...this.form.ydAward, ...this.form.subscriptionPlanAward, ...this.form.questionPageAward]
      this.fetchCurrentCoupons(newArr)
    },
    /**
     * 选择优惠券
     */
    openCoupons(type) {
      this.$refs.couponModal.show(type)
    },
    // 添加优惠券
    handleAddCoupons(list, type) {
      let currList = []
      if (type == 'boxAward') {
        currList = this.boxAwardList
      } else if (type == 'ydAward') {
        currList = this.ydAwardList
      } else if (type == 'subscriptionPlanAward') {
        currList = this.subscriptionPlanAwardList
      } else if (type == 'questionPageAward') {
        currList = this.questionPageAwardList
      }

      let coupons = [...currList, ...list]
      let newArr = coupons.filter((currentValue, currentIndex, sourceArr) => {
        return sourceArr.findIndex(x => x.id === currentValue.id) === currentIndex
      })
      // console.log(newArr)
      if (type == 'boxAward') {
        this.form.boxAward = newArr.map(e => e.id)
        this.boxAwardList = newArr
        this.$refs.boxAwardList.setData(newArr, 'boxAward')
      } else if (type == 'ydAward') {
        this.form.ydAward = newArr.map(e => e.id)
        this.ydAwardList = newArr
        this.$refs.ydAwardList.setData(newArr, 'ydAward')
      } else if (type == 'subscriptionPlanAward') {
        this.form.subscriptionPlanAward = newArr.map(e => e.id)
        this.subscriptionPlanAwardList = newArr
        this.$refs.subscriptionPlanAwardList.setData(newArr, 'subscriptionPlanAward')
      } else if (type == 'questionPageAward') {
        this.form.questionPageAward = newArr.map(e => e.id)
        this.questionPageAwardList = newArr
        this.$refs.questionPageAwardList.setData(newArr, 'questionPageAward')
      }
    },
    // 更新优惠券
    updateCoupons(list, type) {
      if (type == 'boxAward') {
        this.form.boxAward = list.length > 0 ? list.map(e => e.id) : ''
        this.boxAwardList = list
      } else if (type == 'ydAward') {
        this.form.ydAward = list.length > 0 ? list.map(e => e.id) : ''
        this.ydAwardList = list
      } else if (type == 'subscriptionPlanAward') {
        this.form.subscriptionPlanAward = list.length > 0 ? list.map(e => e.id) : ''
        this.subscriptionPlanAwardList = list
      } else if (type == 'questionPageAward') {
        this.form.questionPageAward = list.length > 0 ? list.map(e => e.id) : ''
        this.questionPageAwardList = list
      }
    }
  }
}
</script>
<style lang="less" scoped>
.coupon-table {
  margin: 0 auto 48px;
  width: 1000px;
}
</style>

